import F2 from '../../components/f2-canvas/lib/f2';
const {
  $util,
} = getApp();
Page({

  data: {
    // 党员性别分布环图
    sex: {
      lazyLoad: true,
    },
    // 党员类别分布环图
    category: {
      lazyLoad: true,
    },
    //党员年龄柱状图
    age: {
      lazyLoad: true,
    },
    //党员学历柱状图
    education: {
      lazyLoad: true,
    },
    // 党组织数量折线图
    trend: {
      lazyLoad: true,
    },
  },

  onReady() {
    $util.request({
      url: 'entry/wxapp/statistics.view.getdata',
      data: {},
      success: (res) => {
        res.member_sex[0].type = '男            ';
        res.member_sex[1].type = '女            ';
        this.setData(res, () => {
          // 党员性别分布环图
          this.sexComponent = this.selectComponent('#sex-dom');
          this.sexComponent.init(this.initSex);
          // 党员类别分布环图
          this.categoryComponent = this.selectComponent('#category-dom');
          this.categoryComponent.init(this.initCategory);
          //党员年龄柱状图
          this.ageComponent = this.selectComponent('#age-dom');
          this.ageComponent.init(this.initAge);
          //党员学历柱状图
          this.educationComponent = this.selectComponent('#education-dom');
          this.educationComponent.init(this.initEducation);
          //党组织数量折线图
          this.trendComponent = this.selectComponent('#trend-dom');
          this.trendComponent.init(this.initTrend);
        });
      },
    });
  },
  initSex(canvas, width, height) {
    const {
      Util,
      G,
    } = F2;
    const {
      Group,
    } = G;

    function drawLabel(shape, coord, canvas) {
      const {
        center,
      } = coord;
      const origin = shape.get('origin');
      const points = origin.points;
      const x1 = (points[2].x - points[1].x) * 0.75 + points[1].x;
      const x2 = (points[2].x - points[1].x) * 1.8 + points[1].x;
      const y = (points[0].y + points[1].y) / 2;
      const point1 = coord.convertPoint({
        x: x1,
        y,
      });
      const point2 = coord.convertPoint({
        x: x2,
        y,
      });

      const group = canvas.addGroup();
      group.addShape('Line', {
        attrs: {
          x1: point1.x,
          y1: point1.y,
          x2: point2.x,
          y2: point2.y,
          lineDash: [0, 2, 2],
          stroke: '#808080',
        },
      });
      const text = group.addShape('Text', {
        attrs: {
          x: point2.x,
          y: point2.y,
          text: origin._origin.type + '  ' + origin._origin.cost + ' 人',
          fill: '#808080',
          textAlign: 'left',
          textBaseline: 'bottom',
        },
      });
      const textWidth = text.getBBox().width;
      const baseLine = group.addShape('Line', {
        attrs: {
          x1: point2.x,
          y1: point2.y,
          x2: point2.x,
          y2: point2.y,
          stroke: '#808080',
        },
      });
      if (point2.x > center.x) {
        baseLine.attr('x2', point2.x + textWidth);
      } else if (point2.x < center.x) {
        text.attr('textAlign', 'right');
        baseLine.attr('x2', point2.x - textWidth);
      } else {
        text.attr('textAlign', 'center');
        text.attr('textBaseline', 'top');
      }
      shape.label = group;
    }
    let sum = 0;
    let data = this.data.member_sex;
    data.map(obj => {
      sum += obj.cost;
    });
    let chart = new F2.Chart({
      el: canvas,
      width,
      height,
    });
    chart.source(data);
    let lastClickedShape;
    chart.legend({
      position: 'right',
      offsetY: -5,
      marker: 'square',
      align: 'middle',
      itemWidth: 100,
      itemMarginBottom: 20,
      onClick(ev) {
        const {
          clickedItem,
        } = ev;
        const dataValue = clickedItem.get('dataValue');
        const canvas = chart.get('canvas');
        const coord = chart.get('coord');
        const geom = chart.get('geoms')[0];
        const container = geom.get('container');
        const shapes = geom.get('shapes'); // 只有带精细动画的 geom 才有 shapes 这个属性
        let clickedShape;
        // 找到被点击的 shape
        Util.each(shapes, shape => {
          const origin = shape.get('origin');
          if (origin && origin._origin.type === dataValue) {
            clickedShape = shape;
            return false;
          }
        });

        if (lastClickedShape) {
          lastClickedShape.animate().to({
            attrs: {
              lineWidth: 0,
            },
            duration: 200,
          }).onStart(() => {
            if (lastClickedShape.label) {
              lastClickedShape.label.hide();
            }
          }).onEnd(() => {
            lastClickedShape.set('selected', false);
          });
        }

        if (clickedShape.get('selected')) {
          clickedShape.animate().to({
            attrs: {
              lineWidth: 0,
            },
            duration: 200,
          }).onStart(() => {
            if (clickedShape.label) {
              clickedShape.label.hide();
            }
          }).onEnd(() => {
            clickedShape.set('selected', false);
          });
        } else {
          const color = clickedShape.attr('fill');
          clickedShape.animate().to({
            attrs: {
              lineWidth: 5,
            },
            duration: 350,
            easing: 'bounceOut',
          }).onStart(() => {
            clickedShape.attr('stroke', color);
            clickedShape.set('zIndex', 1);
            container.sort();
          }).onEnd(() => {
            clickedShape.set('selected', true);
            clickedShape.set('zIndex', 0);
            container.sort();
            lastClickedShape = clickedShape;
            if (clickedShape.label) {
              clickedShape.label.show();
            } else {
              drawLabel(clickedShape, coord, canvas);
            }
            canvas.draw();
          });
        }
      },
    });
    chart.coord('polar', {
      transposed: true,
      innerRadius: 0.7,
      radius: 0.5,
    });
    chart.axis(false);
    chart.tooltip(false);
    chart.interval()
      .position('a*cost')
      .color('type', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0'])
      .adjust('stack');

    chart.guide().text({
      position: ['50%', '50%'],
      content: sum,
      style: {
        fontSize: 24,
      },
    });
    chart.render();
    return chart;
  },
  initCategory(canvas, width, height) {
    const {
      Util,
      G,
    } = F2;
    const {
      Group,
    } = G;

    function drawLabel(shape, coord, canvas) {
      const {
        center,
      } = coord;
      const origin = shape.get('origin');
      const points = origin.points;
      const x1 = (points[2].x - points[1].x) * 0.75 + points[1].x;
      const x2 = (points[2].x - points[1].x) * 1.8 + points[1].x;
      const y = (points[0].y + points[1].y) / 2;
      const point1 = coord.convertPoint({
        x: x1,
        y,
      });
      const point2 = coord.convertPoint({
        x: x2,
        y,
      });

      const group = canvas.addGroup();
      group.addShape('Line', {
        attrs: {
          x1: point1.x,
          y1: point1.y,
          x2: point2.x,
          y2: point2.y,
          lineDash: [0, 2, 2],
          stroke: '#808080',
        },
      });
      const text = group.addShape('Text', {
        attrs: {
          x: point2.x,
          y: point2.y,
          text: origin._origin.type + '  ' + origin._origin.cost + ' 人',
          fill: '#808080',
          textAlign: 'left',
          textBaseline: 'bottom',
        },
      });
      const textWidth = text.getBBox().width;
      const baseLine = group.addShape('Line', {
        attrs: {
          x1: point2.x,
          y1: point2.y,
          x2: point2.x,
          y2: point2.y,
          stroke: '#808080',
        },
      });
      if (point2.x > center.x) {
        baseLine.attr('x2', point2.x + textWidth);
      } else if (point2.x < center.x) {
        text.attr('textAlign', 'right');
        baseLine.attr('x2', point2.x - textWidth);
      } else {
        text.attr('textAlign', 'center');
        text.attr('textBaseline', 'top');
      }
      shape.label = group;
    }
    let sum = 0;
    let data = this.data.member_category;
    data.map(obj => {
      sum += obj.cost;
    });
    let chart = new F2.Chart({
      el: canvas,
      width,
      height,
    });
    chart.source(data);
    let lastClickedShape;
    chart.legend({
      position: 'right',
      offsetY: -5,
      marker: 'square',
      align: 'middle',
      itemWidth: 100,
      itemMarginBottom: 20,
      onClick(ev) {
        const {
          clickedItem,
        } = ev;
        const dataValue = clickedItem.get('dataValue');
        const canvas = chart.get('canvas');
        const coord = chart.get('coord');
        const geom = chart.get('geoms')[0];
        const container = geom.get('container');
        const shapes = geom.get('shapes'); // 只有带精细动画的 geom 才有 shapes 这个属性
        let clickedShape;
        // 找到被点击的 shape
        Util.each(shapes, shape => {
          const origin = shape.get('origin');
          if (origin && origin._origin.type === dataValue) {
            clickedShape = shape;
            return false;
          }
        });

        if (lastClickedShape) {
          lastClickedShape.animate().to({
            attrs: {
              lineWidth: 0,
            },
            duration: 200,
          }).onStart(() => {
            if (lastClickedShape.label) {
              lastClickedShape.label.hide();
            }
          }).onEnd(() => {
            lastClickedShape.set('selected', false);
          });
        }

        if (clickedShape.get('selected')) {
          clickedShape.animate().to({
            attrs: {
              lineWidth: 0,
            },
            duration: 200,
          }).onStart(() => {
            if (clickedShape.label) {
              clickedShape.label.hide();
            }
          }).onEnd(() => {
            clickedShape.set('selected', false);
          });
        } else {
          const color = clickedShape.attr('fill');
          clickedShape.animate().to({
            attrs: {
              lineWidth: 5,
            },
            duration: 350,
            easing: 'bounceOut',
          }).onStart(() => {
            clickedShape.attr('stroke', color);
            clickedShape.set('zIndex', 1);
            container.sort();
          }).onEnd(() => {
            clickedShape.set('selected', true);
            clickedShape.set('zIndex', 0);
            container.sort();
            lastClickedShape = clickedShape;
            if (clickedShape.label) {
              clickedShape.label.show();
            } else {
              drawLabel(clickedShape, coord, canvas);
            }
            canvas.draw();
          });
        }
      },
    });
    chart.coord('polar', {
      transposed: true,
      innerRadius: 0.7,
      radius: 0.5,
    });
    chart.axis(false);
    chart.tooltip(false);
    chart.interval()
      .position('a*cost')
      .color('type', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0', '#242EC9'])
      .adjust('stack');

    chart.guide().text({
      position: ['50%', '50%'],
      content: sum,
      style: {
        fontSize: 24,
      },
    });
    chart.render();
    return chart;
  },
  initAge(canvas, width, height) {
    const data = this.data.member_age;
    let chartColumn = new F2.Chart({
      el: canvas,
      width,
      height,
    });

    chartColumn.source(data, {});
    chartColumn.tooltip({
      showItemMarker: false,
      onShow(ev) {
        console.log(ev);
        const {
          items,
        } = ev;
        items[0].name = null;
        items[0].name = items[0].title;
        items[0].value = items[0].value + '人';
      },
    });
    // 坐标轴文本
    chartColumn.axis('age', {
      label: {
        rotate: -Math.PI / 8,
        textAlign: 'end',
        textBaseline: 'middle',
      },
    });
    chartColumn.interval().position('age*val');
    chartColumn.render();
    return chartColumn;
  },
  initEducation(canvas, width, height) {
    const data = this.data.member_education;
    let chartColumn = new F2.Chart({
      el: canvas,
      width,
      height,
    });

    chartColumn.source(data, {});
    chartColumn.tooltip({
      showItemMarker: false,
      onShow(ev) {
        const {
          items,
        } = ev;
        items[0].name = null;
        items[0].name = items[0].title;
        items[0].value = items[0].value + '人';
      },
    });
    // 坐标轴文本旋转
    chartColumn.axis('education', {
      label: {
        rotate: -Math.PI / 8,
        textAlign: 'end',
        textBaseline: 'middle',
      },
    });
    chartColumn.interval().position('education*val');
    chartColumn.render();
    return chartColumn;
  },
  initTrend(canvas, width, height) {
    let data = this.data.oragn_trend;
    let chart = new F2.Chart({
      el: canvas,
      width,
      height,
      animate: false,
    });
    chart.source(data, {
      val: {
        type: 'linear',
        min: 0,
      },
    });
    chart.tooltip({
      showCrosshairs: true,
      showItemMarker: true,
      background: {
        radius: 2,
        fill: '#B81C24',
        padding: [3, 5],
      },
      nameStyle: {
        fill: '#fff',
      },
      onShow(ev) {
        console.log(ev);
        const items = ev.items;
        items[0].name = items[0].title;
        items[0].value = items[0].value;
      },
    });
    chart.line().position('year*val');
    chart.point().position('year*val').style({
      lineWidth: 1,
      stroke: '#fff',
    });

    chart.interaction('pan');
    chart.render();
    return chart;
  },
  onShareAppMessage() {
    return {
      title: '党内视图',
      path: '/ws_party_const/pages/chart/index',
    };
  },
});